<template>
<onekit-page>
<onekit-view onekit-class="container">
	<div is="onekit-template-head" :DATA="`${JSON.stringify({title:'createContext'})}`"></div>
	<onekit-view onekit-class="page-body">
		<onekit-view onekit-class="page-section">
			<onekit-canvas onekit-class="canvas-element" canvas-id="canvas"></onekit-canvas>
			<onekit-scroll-view onekit-class="canvas-buttons" scroll-y="true">
				<template v-for="(method,index) in methods">
					<onekit-button :key="index" onekit-class="canvas-button" @Tap="method">{{method}}</onekit-button>
				</template>
				<onekit-button onekit-class="canvas-button" type="primary" @Tap="toTempFilePath">toTempFilePath</onekit-button>
			</onekit-scroll-view>
		</onekit-view>
	</onekit-view>
	<div is="onekit-template-foot"></div>
</onekit-view>
</onekit-page></template>
<script>
/* eslint-disable */
import Vue from 'vue';
import onekit_template_0 from '../../../common/head.head.vue';Vue.component('onekit-template-head',onekit_template_0);
import onekit_template_1 from '../../../common/foot.foot.vue';Vue.component('onekit-template-foot',onekit_template_1);
const ONEKIT_JSON= {
  "navigationBarTitleText": "创建画布",
  "usingComponents": {
    
  }
};
const ONEKIT_SJS = {
};
import wx from '../../../../weixin2vue/wx.js';
import Macro from '../../../../weixin2vue/Macro.js';
const {getApp,getCurrentPages} = Macro;
import Page from '../../../../weixin2vue/OnekitPage.js';
import Component from '../../../../weixin2vue/OnekitComponent.js';
const example = require('./example.js');
export default Page(ONEKIT_JSON,["methods"],ONEKIT_SJS,{
    "onShareAppMessage"(){
      return {
        "title":'创建画布',
        "path":'packageAPI/pages/canvas/canvas'
};
    },
    "onLoad"(){
      this.context = wx.createContext();
      const methods = Object.keys(example);
      this.setData({
        methods
});
      const that = this;
      methods.forEach(function(method){
      that[method] = function(){
      example[method](that.context);
      const actions = that.context.getActions();
      wx.drawCanvas({
        "canvasId":'canvas',
        actions
});
    };
    });
    },
    "toTempFilePath"(){
      wx.canvasToTempFilePath({
        "canvasId":'canvas',
        "success"(res){
          console.log(res);
        },
        "fail"(res){
          console.log(res);
        }
});
    }
});

</script>
<style 
 lang="css">
.canvas-element-wrapper {
  display: block ;
  margin-bottom: 50px ;
}
.canvas-element {
  width: 100% ;
  height: 250px ;
  background-color: #ffffff ;
}
.canvas-buttons {
  padding: 15px 25px 5px ;
  width: 100% ;
  height: 330px ;
  box-sizing: border-box ;
}
.canvas-button {
  float: left ;
  line-height: 2 ;
  width: 150px ;
  margin: 8px 11px ;
}
</style>